<template>
  <div style="background-color: #ffffff">
    <a-tabs>
      <a-tab-pane key="1" tab="电子面单">
        <div style="padding: 16px">
          <h1 style="font-size: 18px">申请开通新的服务商</h1>
          <a-alert message="电子面单服务仅针对已经与快递公司达成电子面单合作的商户使用，请联系快递网点了解相关开通事宜。" banner />
          <div style="padding: 12px;background-color: #FAFAFB; overflow: hidden;margin-top: 16px">
            <div style="width: 180px; float:left;line-height: 32px"><span style="font-size: 14px; font-weight: bold">德邦快递(常用)</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">客服电话：400-830-5555</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">官网地址：<a href="http://www.deppon.com" target="_blank">www.deppon.com</a></span></div>
            <div style="float: right"><a-button type="primary">申请开通</a-button></div>
          </div>
          <div style="padding: 12px;background-color: #FAFAFB; overflow: hidden;margin-top: 16px">
            <div style="width: 180px; float:left;line-height: 32px"><span style="font-size: 14px; font-weight: bold">京东快递(常用)</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">客服电话：4006033600</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">官网地址：<a href="http://www.jdwl.com" target="_blank">www.jdwl.com</a></span></div>
            <div style="float: right"><a-button type="primary">申请开通</a-button></div>
          </div>
          <div style="padding: 12px;background-color: #FAFAFB; overflow: hidden;margin-top: 16px">
            <div style="width: 180px; float:left;line-height: 32px"><span style="font-size: 14px; font-weight: bold">顺丰快递(常用)</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">客服电话：4008111111</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">官网地址：<a href="http://www.sf-express.com" target="_blank">www.sf-express.com</a></span></div>
            <div style="float: right"><a-button type="primary">申请开通</a-button></div>
          </div>
          <div style="padding: 12px;background-color: #FAFAFB; overflow: hidden;margin-top: 16px">
            <div style="width: 180px; float:left;line-height: 32px"><span style="font-size: 14px; font-weight: bold">圆通快递(常用)</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">客服电话：95554</span></div>
            <div style="width: 200px; float:left;line-height: 32px"><span style="font-size: 14px;">官网地址：<a href="http://www.yto.net.cn" target="_blank">www.yto.net.cn</a></span></div>
            <div style="float: right"><a-button type="primary">申请开通</a-button></div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="常用服务商">
        <div style="padding: 16px">
          <a-alert message="选中的常用服务商将会出现在订单管理中发货物流和查询订单列表中 （最多可添加20个常用服务商）" banner />
          <h1 style="font-size: 18px;margin-top: 16px">已选择的服务商</h1>
          <div>
            <a-tag closable color="#108ee9" style="height: 30px">
              <span style="font-size: 14px;padding: 4px; line-height: 30px">快捷快递</span>
            </a-tag>
          </div>
          <h1 style="font-size: 18px;margin-top: 32px">直接搜索</h1>
          <div>
            <a-input-search placeholder="请输入需要搜索的快递" enter-button style="width: 300px" />
          </div>
          <div style="margin-top: 8px;color: #0D0D0D">热门搜索<a-icon type="fire" style="color: red" />
            <a style="color: #0D0D0D;margin-left: 12px" @click="add">EMS</a>
            <a style="color: #0D0D0D;margin-left: 12px" @click="add">京东快递</a>
            <a style="color: #0D0D0D;margin-left: 12px" @click="add">圆通快递</a>
            <a style="color: #0D0D0D;margin-left: 12px" @click="add">顺丰快递</a>
            <a style="color: #0D0D0D;margin-left: 12px" @click="add">韵达快递</a>
          </div>
          <h1 style="font-size: 18px;margin-top: 24px">服务商列表</h1>
          <div style="border: 1px #dddddd solid;border-radius: 8px">
            <div style="border-bottom: 1px #dddddd solid; padding: 16px">
              <span style="font-size: 40px;color: #3f67ee;margin: 0 12px">A</span>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">安得物流</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">安能物流</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">安鲜达</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">安迅物流</a>
            </div>
            <div style="border-bottom: 1px #dddddd solid; padding: 16px">
              <span style="font-size: 40px;color: #3f67ee;margin: 0 12px">B</span>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">百事亨通</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">百世快递（常用）</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">百世快运</a>
            </div>
            <div style="border-bottom: 1px #dddddd solid; padding: 16px">
              <span style="font-size: 40px;color: #3f67ee;margin: 0 12px">D</span>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">当当</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">当当物流</a>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">丹鸟</a>
            </div>
            <div style=" padding: 16px">
              <span style="font-size: 40px;color: #3f67ee;margin: 0 12px">E</span>
              <a style="color: #0D0D0D;margin-left: 12px" @click="add">EMS(常用)</a>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <a-modal v-model="visible" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          确认
        </a-button>
      </template>
      <div>是否确认将此服务商添加到常用服务商？</div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'ManageServer',
  data () {
    return {
      visible: false
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>
